<template>
  <div ref="refChart" :style="{ height: kH6 * 2 + 'px'}"></div>
</template>

<script>
import theme from '../../assets/theme/theme'

export default {
  name: 'C9',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartFive;
    }
  },
  data() {
    return {
      chartInstance: null,
      allData1: [],
      allData2: [],
      allData3: [],
      allData4: [],
      kH6: null,
      // 自适应浏览器获取宽高大小定时器
      screenTimer: null,
      // 局部刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kH6 = Math.round(this.screenHeight * 0.46)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 自适应浏览器获取宽高大小定时器
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取接口数据
    // this.getData();
    // 调用Echarts图表自适应方法
    this.screenAdapter();
    // Echarts图表自适应
    window.addEventListener("resize", this.screenAdapter);
    // 局部刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
    // Echarts图表自适应销毁
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 自适应浏览器获取宽高大小定时器
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      this.kH6 = Math.round(this.screenHeight * 0.46);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      const myChart = this.$echarts.init(this.$refs.refChart, theme, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      const xData = function () {
        const data = [];
        for (let i = 1; i < 31; i++) {
          data.push(i + "日");
        }
        return data;
      }();
      let initOption;
      setTimeout(function () {
        initOption = {
          title: {
            text: '接口查询情况统计',
            left: 'center'
          },
          backgroundColor: "#000000",
          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "cross",
              textStyle: {
                color: "#ffffff"
              }

            },
          },
          "grid": {
            "borderWidth": 0,
            "top": 110,
            "bottom": 95,
            textStyle: {
              color: "#ffffff"
            }
          },
          "legend": {
            // x: '44%',
            top: '11%',
            textStyle: {
              color: '#ffffff',
            },
            "data": ['成功次数', '失败次数', '失败占比']
          },


          "calculable": true,
          "xAxis": [{
            "type": "category",
            "axisLine": {
              lineStyle: {
                color: '#ffffff'
              }
            },
            "axisPointer": {
              "type": "shadow"
            },
            "splitLine": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitArea": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "data": xData,
          }],
          "yAxis": [{
            "type": "value",
            "name": "会话",
            "nameTextStyle": {
              "color": "#ffffff"
            },
            "min": 0,
            "max": 6000,
            "splitLine": {
              "show": false
            },
            "axisLine": {
              lineStyle: {
                color: '#ffffff'
              }
            },
            "axisTick": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "splitArea": {
              "show": false
            },

          },
            {
              "type": "value",
              "name": "占比（%）",
              "nameTextStyle": {
                "color": "#ffffff"
              },
              "min": 0,
              "max": 100,
              "splitLine": {
                "show": false
              },
              "axisLine": {
                lineStyle: {
                  color: '#ffffff'
                }
              },
              "axisTick": {
                "show": false
              },
              "axisLabel": {
                "interval": 0,

              },
              "splitArea": {
                "show": false
              },

            }],
          "dataZoom": [{
            "show": true,
            "height": 30,
            "xAxisIndex": [
              0
            ],
            bottom: 30,
            "start": 10,
            "end": 33,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: "#ffffff",

            },
            textStyle: {
              color: "#ffffff"
            },
            borderColor: "#ffffff"


          }, {
            "type": "inside",
            "show": true,
            "height": 15,
            "start": 1,
            "end": 35
          }],
          "series": [{
            "name": "成功次数",
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
              "normal": {
                "color": "rgb(22,168,0)",
                "label": {
                  "show": true,
                  "textStyle": {
                    "color": "#fff"
                  },
                  "position": "insideTop",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            "data": [
              709,
              1917,
              2455,
              2610,
              1719,
              2610,
              1719,
              1433,
              1544,
              1285,
              2208,
              2610,
              2610,
              1719,
              2610,
              1200,
              1719,
              1431,
              3372,
              2484,
              1078,
              1719,
              2610,
              1719,
              1433,
              1544,
              1285,
              2208,
              2610,
              2610
            ],
          },

            {
              "name": "失败次数",
              "type": "bar",
              "stack": "总量",
              "itemStyle": {
                "normal": {
                  "color": "rgb(243,12,35)",
                  "barBorderRadius": 0,
                  "label": {
                    "show": true,
                    "position": "top",
                    formatter: function (p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [
                327,
                1776,
                507,
                1200,
                800,
                482,
                444,
                1390,
                1001,
                951,
                507,
                1200,
                800,
                800,
                482,
                404,
                1390,
                1001,
                951,
                800,
                800,
                482,
                504,
                1390,
                1001,
                951,
                507,
                482,
                381,
                720
              ]
            }, {
              "name": "失败占比",
              "type": "line",
              symbolSize: 10,
              symbol: 'circle',
              "itemStyle": {
                "normal": {
                  "color": "rgb(255,207,15)",
                  "barBorderRadius": 0,
                  "label": {
                    "show": true,
                    "position": "top",
                    formatter: function (p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "yAxisIndex": 1,
              "data": [70, 66, 54, 51, 68, 68, 56, 62, 63, 53, 65, 64, 68, 56, 69, 56, 54, 70, 52, 58, 58, 70, 63, 56, 56, 47, 62, 50, 51, 62]
            },
          ]
        };
        myChart.setOption(initOption);
      });
      if (initOption && typeof initOption === 'object') {
        myChart.setOption(initOption);
      }
    },
    screenAdapter() {
      this.titleFontSize = Math.round(this.$refs.refChart.offsetWidth / 30);
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        xAxis: {
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
        yAxis: {
          //  改变y轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
      };
      // 图表自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        // this.getData();
      }, 5000)
    }
  }
}
</script>
